<template>
  <div>
    <div id="main" ref="map"></div>
    <el-button
      id="button"
      v-show="chinaShow"
      @click="ChinaClick('china')"
      icon="el-icon-arrow-left"
      type="primary"
      >中国地图</el-button
    >
  </div>
</template>

<script>
import 'echarts-gl';
import Pinyin from '../../node_modules/js-pinyin';
export default {
  data() {
    return {
      chinaShow: false,
      myChart: null,
      size: null,
      level: 'china',
      // Data: [{value:[113.408280,23.024411],name:'广州市',addr:'广州市番禺区',longitude:113.408280,latitude:23.024411}],
      Data: [],
      scatter: {},
    };
  },
  created() {},
  mounted() {
    // this.PowerStation();
    let widthW = document.documentElement.clientWidth;
    if (widthW > 1620) {
      this.size = 200;
    } else {
      this.size = 300;
    }
    let city = 'china';
    this.initProviceMap(city);
  },
  methods: {
    // PowerStation(name) {
    //   this.$axios
    //     .get('/PLC/getEnterpriseListByCompanyId', {
    //       params: { companyId: '84500' },
    //     })
    //     .then(
    //       (res) => {
    //         if (res.data.status == true) {
    //           this.Data = res.data.detail;
    //           if(this.Data.length>0){
    //             this.Data.forEach((item) => {
    //             let myArray = [item.longitude, item.latitude];
    //             this.$set(item, 'value', myArray);
    //             let city = '';
    //             if (name) {
    //               city = name;
    //             } else {
    //               city = 'china';
    //             }
    //             this.initProviceMap(city);
    //           });
    //           }
    //         } else {
    //           this.$message.error('电站位置信息获取失败！');
    //         }
    //       },
    //       (err) => {
    //         this.$message.error('电站位置信息获取失败！');
    //       }
    //     );
    // },
    MapClick(name) {
      this.PowerStation(name);
      this.initProviceMap(name);
    },
    ChinaClick(val) {
      this.chinaShow = false;
      this.PowerStation();
      this.initProviceMap(val);
    },
    convertData(data) {
      // console.log(data, 'data');
      // const colors = [
      //   {'1418': 'red'}, // 数据值为low时的颜色
      //   {'1419': 'yellow'}, // 数据值为medium时的颜色
      // ];
      let color;
      let geoCoordMap = {};
      this.Data.forEach((item) => {
        let myArray = [item.longitude, item.latitude];
        this.$set(geoCoordMap, item.name, myArray);
      });
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            addr: data[i].addr,
            color:color,
            id:data[i].id
          });
        }
      }
      return res;
    },
    initProviceMap(city) {
      if (city == 'china') {
        //中国地图时只显示标点图标
        this.scatter = {
          name: 'scatter3D',
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          zlevel: 3,
          symbol: 'pin', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
         symbolSize: 40, //标点大小
          opacity: 0,
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: '{b}',
              textStyle: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 'bold',
              },
            },
          },
          data: this.Data,
          itemStyle: {
            //坐标点颜色
            color: '#33d3f7',
            borderWidth: 1,
            borderColor: '#fff',
          },
          emphasis: {
            show: true,
            itemStyle: {
              //坐标点颜色
              color: '#f90',
            },
            textStyle: {
              color: '#f90',
            },
          },
          blur: {
            label: {
              show: false,
            },
          },
        };
      } else {
        //不是中国地图时只显示柱状图
        this.scatter = {
          name: 'bar3D',
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          barSize: 2, //柱子粗细
          shading: 'lambert',
          opacity: 1,
          zlevel: 3,
          color: '#f90',
          bevelSize: 0.5,
          minHeight: 15,
          label: {
            show: true,
            position: 'top',
            formatter: '{b}',
          },
          tooltip: {
            show: true,
            trigger: 'item',
            backgroundColor: '#0eccffad',
            borderColor: '#fff',
            textStyle: {
              color: '#fff',
            },
            formatter: function (params) {
              // console.log(params,'pa');
              if (params.componentSubType == 'bar3D') {
                return (
                  '电站名：' +
                  params.data.name +
                  '<br/>' +
                  '电站地址：' +
                  params.data.addr
                );
              }
            },
          },
          // data:this.Data
          data: this.convertData(this.Data),
        };
      }
      let myChart = null;
      myChart = this.$echarts.init(this.$refs.map);
      let china = require(`../../public/static/map/province/${city}.json`);
      let provincialLevel = [
        '广东',
        '广西',
        '福建',
        '浙江',
        '江苏',
        '北京',
        '上海',
        '云南',
        '西藏',
        '新疆',
        '海南',
        '台湾',
        '湖南',
        '湖北',
        '河南',
        '河北',
        '陕西',
        '山西',
        '山东',
        '甘肃',
        '辽宁',
        '吉林',
        '黑龙江',
        '内蒙古',
        '新疆',
        '贵州',
        '四川',
        '重庆',
        '天津',
        '江西',
        '安徽',
        '青海',
        '宁夏',
        '香港',
        '澳门',
      ];
      //3D地图旋转主要配置
      var viewControl = {
        alpha: 40, // 上下旋转的角度
        beta: -2, // 左右旋转的角度
        rotateSensitivity: 5, // 旋转操作的灵敏度
        panSensitivity: 3,
        panMouseButton: 'right',
        distance: 160,
        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        maxAlpha: 100, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        minBeta: -25, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
        animation: false, // 是否开启动画。[ default: true ]
        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
      };
      // 注册 echarts 地图
      this.$echarts.registerMap(this.level, china);
      var option = {
        geo3D: {
          map: this.level,
          show: false,
          boxWidth: 200,
          boxHeight: 5, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
          regionHeight: 5,
          shading: 'lambert',
          top: -15, //文字悬浮高度
          viewControl: viewControl,
          light: {
            main: {
              color: '#fff',
              intensity: 1.2,
              shadow: false,
              alpha: 50,
              beta: 10,
            },
            ambient: {
              intensity: 0.3,
            },
          },
          itemStyle: {
            borderColor: 'rgb(62,215,213)',
            areaColor: '#4490fc',
            borderWidth: 1,
          },
        },
        // visualMap: {
        //   type: 'piecewise',[113.751644,23.020091],[113.386429,23.056651]
        //   pieces: [
        //     { value: 1, color: 'green' }, // 状态值为1时，标点颜色为绿色
        //     { value: 2, color: 'yellow' }, // 状态值为2时，标点颜色为黄色
        //     { value: 3, color: 'red' }, // 状态值为3时，标点颜色为红色
        //   ],
        //   dimension: 2, // 指定映射的数据维度，例如第3维度（索引为2）表示状态
        // },
        series: [
          {
            type: 'map3D',
            map: this.level,
            silent: false,
            show: true,
            boxWidth: 200,
            boxHeight: 15, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
            regionHeight: 8,
            shading: 'lambert',
            label: {
              show: false, // 是否显示名字
              color: '#4fd7fd', // 文字颜色
              fontSize: 12, // 文字大小
              // fontWeight: 'bold', // 文字大小
            },
            itemStyle: {
              color: '#082153',
              // opacity: 1,
              borderWidth: 1,
              borderColor: '#7ebdf6',
              shadowBlur: 5, // 图形阴影的模糊大小。
              shadowColor: '#233F53', // 阴影色 #233F53
              shadowOffsetX: 5, // X轴阴影
              shadowOffsetY: 5, // Y轴阴影
              zlevel:1,
              opacity: 0.6,
            },
            emphasis: {
              show: true,
              label: {
                show: true,
                distance: 2,
                textStyle: {
                  color: '#fff',
                },
              },
              itemStyle: {
                color: '#7ebdf6',
              },
            },
            light: {
              main: {
                shadow: true,
                shadowQuality: 'ultra',
              },
            },
            viewControl: viewControl,
          },
          this.scatter,
        ],
        tooltip: {
          show: true,
          trigger: 'item',
          z: 9,
          backgroundColor: '#0eccffad',
          borderColor: '#fff',
          textStyle: {
            color: '#fff',
          },
          formatter: function (params) {
            if (params.componentSubType == 'scatter3D') {
              return (
                '电站名：' +
                params.data.name +
                '<br/>' +
                '地址：' +
                params.data.addr
              );
            }
          },
        },
      };
      if (myChart && myChart.getOption()) {
        myChart.dispose();
        myChart = this.$echarts.init(document.getElementById('main'));
        // 处理创建新实例后的操作
      } else {
        // 处理 echarts 实例未初始化或已销毁的情况
      }
      option && myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
      // 点击事件（图层原因，会输出两条数据）
      let than = this;
      myChart.on('click', function (params) {
        if (params.componentType === 'series') {
          // 点击了地图区域，判断是国家还是省份
          provincialLevel.forEach((item) => {
            if (item == params.name) {
              than.$nextTick(() => {
                than.chinaShow = true;
                than.level = 'province';
                Pinyin.setOptions({ charCase: 1 }); //0-首字母大写，1-全小写，2-全大写
                let name = '';
                if (params.name == '陕西') {
                  name = Pinyin.getFullChars(params.data.name) + '1'; //把汉字转为拼音
                } else {
                  name = Pinyin.getFullChars(params.data.name); //把汉字转为拼音
                }
                than.MapClick(name);
              });
            }
          });
          if (params.seriesType === 'map3D') {
            //点击了市级城市
          } else if (
            params.seriesType === 'scatter3D' ||
            params.seriesType === 'bar3D'
          ) {
            than.$buy.$emit('powerId', params.data.id);
            // 点击的是散点图
            than.$router.push({
              path: '/home',
              query: {
                id: params.data.id
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#main {
  width: 100%;
  height: calc(100vh - 0.3125rem);
}
#button {
  position: fixed;
  top: 25%;
  left: 21%;
  background: transparent;
  &:hover {
    border: 1px solid #f90;
    color: #f90;
  }
}
</style>

